import React, { Component } from 'react';
import { SearchBar, WhiteSpace } from 'antd-mobile';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import YwxListView from '../../components/common/YwxListView/YwxListView';
import YwxModuleTitle from '../../components/common/YwxModuleTitle/YwxModuleTitle';
import TeamItem from '../../components/Team/TeamItem/TeamItem';
import TeamCard from '../../components/Team/TeamCard/TeamCard';

import './Team.less';

export default class Team extends Component {

    constructor(props) {
        super(props);
        this.state = {
            keywords: '',
            pageSize: 15,
            list: [],
            noMore: false,
            cardData: {
                addToday: '',
                avatar: '',
                friends: '',
                myTeam: '',
                name: '',
                personal: ''
            }
        }
    }

    componentDidMount() {
        window.addEventListener('resize', this.onBlur);
        this.onRefresh();
    };

    componentWillUnmount() {
        window.removeEventListener('resize', this.onBlur);
    }

    fetchData = (callback) => {
        React.$utils.request({
            url: '/app/team/lately',
            params: {
                name: this.state.keywords,
                pageNo: this.page || 1,
                pageSize: this.state.pageSize
            }
        }).then(res => {
            this.setState({
                noMore: res.length === 0
            });
            callback && callback(res);
        })
    };

    fetchCardData = () => {
        React.$utils.request({
            url: '/app/team/cover'
        }).then(res => {
            this.setState({
                cardData: {
                    ...this.state.cardData,
                    ...res
                }
            })
        })
    };

    onRefresh = () => {
        this.page = 1;
        this.fetchCardData();
        this.fetchData(list => {
            this.setState({
                list: list
            })
        });
    };

    onEndReached = () => {
        this.page++;
        this.fetchData(list => {
            this.setState({
                list: this.state.list.concat(list)
            })
        })
    };

    onkeywordsChange = (value) => {
        this.setState({
            keywords: value
        })
    };

    onBlur = () => {
        setTimeout(() => {
            this.listComponent && this.listComponent.resetHeight();
        }, 200)
    }


    render() {
        return (
            <div className='team'>
                <YwxNavBar>我的团队</YwxNavBar>
                <SearchBar placeholder='按姓名快速查找' onChange={this.onkeywordsChange} value={this.state.keywords} onSubmit={this.onRefresh} />
                <YwxListView
                    ref={el => { this.listComponent = el }}
                    header={
                        <div>
                            <TeamCard info={this.state.cardData} />
                            <YwxModuleTitle style={{ backgroundColor: '#fff', marginBottom: '0.1rem' }}>最近新增</YwxModuleTitle>
                        </div>
                    }
                    list={this.state.list}
                    renderRow={item => (<TeamItem key={item.id} info={item} />)}
                    renderSeparator={(s, r) => <WhiteSpace key={`${s}-${r}`} size='sm' />}
                    onRefresh={this.onRefresh}
                    onEndReached={this.onEndReached}
                    pageSize={this.state.pageSize}
                    noMore={this.state.noMore}
                />
            </div >
        );
    }
}